<template>
  <div>
    <van-notice-bar
  left-icon="volume-o"
  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
    <router-view></router-view>
    <van-button @click="home">点击</van-button>
    <van-form>
      <vanField
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-form>
    <div style="margin: 16px;">
      <van-button @click="onSubmit">提交</van-button>
    </div>
    <div ref>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>
    </div>
    <van-uploader v-model="fileList" multiple :after-read="afterRead" />
    {{index}}
    <van-button @click="addIndex">点击</van-button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  ref,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
import { Form, Button, Field, Tabbar, TabbarItem, Uploader, NoticeBar } from "vant";
import {useStore} from 'vuex'
type progressEvent = {
  loaded:number,
  total:number
}
import {useRoute,useRouter} from 'vue-router'
export default defineComponent({
  // 类型判断
  name: "App",
  components: {
    vanForm: Form,
    vanButton: Button,
    vanField: Field,
    vanTabbar: Tabbar,
    vanTabbarItem: TabbarItem,
    vanUploader: Uploader,
    vanNoticeBar: NoticeBar
  },
  setup() {
    const ctx: any = getCurrentInstance();
    const route: any = useRoute()
    const router: any = useRouter()
    const vuex: any = useStore()
    const allDate: any = reactive({
      username: "",
      password: "",
      switchChecked: false,
      show: false,
      showProgress: false,
      data: [],
      img: "",
      prog: 0,
      fileList: [],
    });
    const index = computed(()=>{return vuex.state.index})
    onMounted(() => {
      console.log(ctx.ctx.$http);
      ctx.ctx.hello()
      console.log(route)
      // ctx.ctx.$http.get('http://localhost:4000/demo',{}).then((res:any)=>{
      //   console.log(1,res)
      // })
    });
    const active = ref(0);
    const onSubmit = () => {
      console.log(
        "submit:",
        "user:" + allDate.username,
        "pass:" + allDate.password
      );
    };
    const home = () => {
      router.push({
        path: '/about'
      })
    }
    const upload = (data: any) => {
      const form = new FormData();
      form.append("file", data.file);
      ctx.ctx.$http
        .fileProgress(
          "http://localhost:4000/upla",
          form,
          { age: 1 },
          {
            onUploadProgress: (progressEvent: progressEvent) => {
              let complete =
                (((progressEvent.loaded / progressEvent.total) * 100) | 0) +
                "%";
              console.log("123", complete);
            },
          }
        )
        .then((res: any) => {
          console.log(2, res);
        });
    };
    const afterRead = (file: any) => {
      console.log(file.file);
      upload(file);
    };
    const addIndex = () => {
      vuex.dispatch('ind',2)
    }
    watch(active, (o: any, n) => {
      console.log(o, n);
    });
    return {
      ...toRefs(allDate),
      onSubmit,
      active,
      afterRead,
      upload,
      home,
      addIndex,
      index
    };
  },
});
</script>

<style>
</style>
